<template>
	<view class="safe-area-inset-bottom">
		<view class="swip_header">
			<view class="slot-box">
				<view style="width: 100%;">
					<uni-search-bar v-model="queryParams.name" type="text" @confirm="handleQuery" @input="handleQuery" placeholder="请输入业务类型名称" />
				</view>
			</view>
			<view class="swiplist">
				<view >业务分类</view>
				<button size="mini" class="add_btn" @click="handleAdd"><i class="iconfont" style="color: #00a660;">&#xeaf3;</i>新增</span></button>
			</view>
		</view>
		
		<!-- 列表 -->
		<view v-if="contractBusinessTypeList != ''" class="listNameTop cardList">
		  <uni-card :is-shadow="false" v-for="(item,index) in contractBusinessTypeList" :key="index">
			<p class="grid-integral">合同类型：{{ item.contractTypeName }}</p>
			<p class="grid-integral">业务类型：{{ item.name }}</p>
			<p class="grid-integral">水印模板：
			    <span v-if="!!item.contractWaterMarkId">{{item.contractWaterMarkName }}</span>
			    <span v-else>默认签约基础水印（水印由签约文件二维码、合同编号组成）</span>
			</p>
			<view slot="actions" class="card-actions">
				<view v-if="item.updateTime != null">创建时间：{{item.createTime}}</view>
				<view v-else>创建时间：--</view>
				<view class="flex_between">
			  <view class="card-actions-item" @click="handleEdit(item)">
			    <text class="card-actions-item-text themeColor">修改</text>
			  </view>
			  <view class="card-actions-item" @click="handleDelete(item,index)" v-if="item.isSystem == 0">
			    <text class="card-actions-item-text errorColor">删除</text>
			  </view>
			  </view>
			</view>	
		</uni-card>
		<!-- 加载更多 -->
		<uni-load-more color="#00a660" :status="loadStatus"/>
		</view>
		<!-- 暂无数据 -->
		<luanqingEmpty :show="true" text="没有更多数据啦" v-else />
		<!-- 修改 查看详情 -->
		<uni-popup ref="ListPopup" background-color="#fff" type="dialog">
			<uni-popup-dialog :before-close="true" :type="msgType" cancelText="取消" confirmText="确定" :title="title" @confirm="dialogConfirm" @close="closed">
			<template v-slot="content">
				<uni-forms ref="form" :rules="rules" :modelValue="form">
					<uni-forms-item label="合同类型" required name="contractTypeId">
						 <uni-data-select v-model="form.contractTypeId" :localdata="contractType" :clear="false" :disabled="form.isSystem == 1"></uni-data-select>
					</uni-forms-item>	
				<uni-forms-item label="业务类型" required name="name">
					<uni-easyinput v-model="form.name" placeholder="请输入项目名称" :clearable="false"/>
				</uni-forms-item>
				<uni-forms-item label="排序" required name="sort">
					<uni-number-box v-model="form.sort" />
				</uni-forms-item>
				</uni-forms>						
			</template>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import {listByCompanyId} from "@/api/ec/person/busiConfig/contractType";
import {addContractBusinessType, delContractBusinessType, getContractBusinessType, 
  updateContractBusinessType,listDTOContractBusinessType } from "@/api/ec/person/busiConfig/contractBusinessType";
	import {parseTime} from "@/utils/common";
	import {parseStrEmpty} from "@/utils/ruoyi";
	import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
	export default {
		components:{luanqingEmpty},
		data() {
			return {
				total:0 ,//总条数
				loadStatus:'loading', //是否加载中 //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				msgType:'info',
				contractType:'', //类型
				contractBusinessTypeList: [], // 合同类型列表
				title: "", // 弹出层标题
				// 查询参数
				queryParams: {
				  pageNum: 1,
				  pageSize: 10,
				  name: null,
				  contractTypeId: null,
				  isSystem: null,      
				},    
				form: {},
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入业务类型名称'
							},{
								minLength: 2, maxLength: 12,
								errorMessage: '长度在2-12个，不能有特殊字符',
								trigger: "change"
							}]
						},
						contractTypeId: {
							rules: [{
								required: true,
								errorMessage: '请选择合同类型',
								trigger: "change"
							}]
						},
						sort: {
							rules: [{
								required: true,
								errorMessage: '请输入排序'
							}]
						},					
				},
			}
		},
		onLoad() {
			// 业务分类列表
			this.getList()
			// 获取合同类型
			this.getContractType();
		},
		//上拉触底函数
		onReachBottom() {
		  if (this.loadStatus != 'noMore' && this.total > this.contractBusinessTypeList.length) {
		    this.loadStatus = 'loading';
		    // 延迟500毫秒显示loading效果
		    setTimeout(() => {
		      // 执行查询的方法
		      this.getList(false);
		    }, 500)
		  } else {
		    // 停止加载
		    this.loadStatus = 'noMore'
		  }
		},
		methods: {
			/** 搜索 */
			handleQuery(){
				this.getList(true);      
			},
			/** 获取合同类型列表 true 重新加载数据； false 加载更多 */
			getList(reload) {
			  if (reload) {
			    this.queryParams.pageNum = 1;
			    this.loadStatus = 'more'
          this.$modal.loading();
			  }
			  listDTOContractBusinessType(this.queryParams).then(response => {
			    if (reload) {
			      uni.hideLoading()
			    }
			    this.total = response.total;
			    if (response.total > 0) {
			      const dataRows = response.rows;
			      this.contractBusinessTypeList = reload ? dataRows : this.contractBusinessTypeList.concat(dataRows);
			    } else {
			      this.contractBusinessTypeList = [];
			    }
			    // 判断数据是否加载完全
			    if (response.total <= this.contractBusinessTypeList.length) {
			      this.loadStatus = 'noMore'
			    }
			    // 页数+1
			    this.queryParams.pageNum++
			  }).catch(() => {
			    if (reload) {
			      uni.hideLoading()
			    }
			  });
			},
			/** 确定修改合同类型 */
			dialogConfirm(){
			    this.$refs.form.validate().then((res) => {
			      if (this.form.id != null) {
			            updateContractBusinessType(this.form).then(response => {
			              this.getList(true);
						  this.closed()
						  this.$modal.msgSuccess("修改成功");
			            });
			          } else {
			            addContractBusinessType(this.form).then(response => {
			              this.getList(true);
						  this.closed()
						  this.$modal.msgSuccess("新增成功");
			            });
			          }
			      });	        
			},
			/** 获取合同类型 */
			getContractType() {
			      listByCompanyId().then(response => {
					var list = []
					  for(var i = 0;i<response.data.length;i++){
					  	var object = {};
					  	object.text = response.data[i].name; // 展示text
					  	object.value = response.data[i].id; // 用id查询
					  	list.push(object);							
					  }
					this.contractType = list;
			      });
			    },
			/** 修改 */
			handleEdit(item,index){
				getContractBusinessType(item.id).then((response)=>{
					this.form = response.data;
					this.title = '修改合同业务分类'
					this.$refs.ListPopup.open('center')
				})	
			},
			/** 删除 */
			handleDelete(item,index){
				if (item.isSystem == 1) {
				    this.$modal.msgError("系统类型无法删除！");
				    return;    
				}
				let that = this
				// 删除
				uni.showModal({
					title: '系统提示',
					confirmColor:'#00a660',
					content: '是否确认删除该业务分类？',
					success: res=> {
						if (res.confirm) {
							delContractBusinessType(item.id);
							that.contractBusinessTypeList.splice(index,1)
              this.$modal.msg("删除成功")
						} else if (res.cancel) {
						}
					 },
				})
			},
			/** 新建合同类型 */
			handleAdd(){
				this.form = {
				        id: null,
				        name: null,
				        companyId: null,
				        contractTypeId: null,
				        sort: 0,
				      };
				this.title = '新增合同业务分类'
				this.$refs.ListPopup.open('center')
			},
			closed(){
				this.$refs.ListPopup.close()
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-forms-item__label{width: 150rpx !important;}
	::v-deep .uni-popup .uni-popup__wrapper{width: 90% !important;padding:0;}
</style>
